import React, { Component } from "react";
import storageUtils from "../../utils/storageUtils";
import withRouter from "../../utils/withRouter";
import { Navigate, Routes, Route } from "react-router-dom";
import "./admin.less";
import LeftNav from "../../components/LeftNav";
import MHeader from "../../components/MHeader";
import { Layout } from "antd";
import Home from "../Home/home";
import Category from "../Category/category";
import Product from "../Product/product";
import Role from "../Role/role";
import User from "../User/user";
import Bar from "../Charts/bar";
import Line from "../Charts/line";
import Pie from "../Charts/pie";
const { Content, Footer } = Layout;

class Admin extends Component {
  constructor(props) {
    super(props);
    this.state = {
      collapsed: false,
    };
  }

  toggleCollapsed = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  render() {
    const user = storageUtils.getUser();
    if (!user._id) {
      return <Navigate to="/login" />;
    }
    return (
      <Layout style={{ height: "100%" }}>
        <LeftNav collapsed={this.state.collapsed}></LeftNav>
        <Layout className="site-layout">
          <MHeader
            collapsed={this.state.collapsed}
            toggleCollapsed={this.toggleCollapsed}
          />
          <Content
            className="site-layout-background"
            style={{
              margin: "24px 16px",
              padding: 24,
              minHeight: "calc(100vh - 64px - 70px)", // 减去Header和Footer的高度
            }}
          >
            <Routes>
              <Route path="/home" element={<Home />} />
              <Route path="/products/category" element={<Category />} />
              <Route path="/products/product/*" element={<Product />} />
              <Route path="/role" element={<Role />} />
              <Route path="/user" element={<User />} />
              <Route path="/charts/bar" element={<Bar />} />
              <Route path="/charts/line" element={<Line />} />
              <Route path="/charts/pie" element={<Pie />} />
              <Route path="*" element={<Navigate to="/home" />} />
            </Routes>
          </Content>
          <Footer style={{ textAlign: "center" }}>
            Ant Design ©2018 Created by Ant UED
          </Footer>
        </Layout>
      </Layout>
    );
  }
}

export default withRouter(Admin);
